<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>HTML 表单: 与用户交互</title>
</head>
<body>
<form name="myForm" action="">
    <input type="button" name="myButton" value="Click Me">
    <input type="submit" name="submit" value="Submit">
    <input type="reset" name="reset" value="Reset">
    <label for="myTextBox">
        <input id="myTextBox" type="text" name="myTextBox" value="Hello World" size="10" maxlength="15">
    </label>
    <label for="txtReadOnly">
        <input id="txtReadOnly" type="text" name="txtReadOnly" value="Look but don't change" readonly="readonly">
    </label>
    <label for="password">
        <input id="password" type="password" name="password">
    </label>
    <input type="hidden" name="myHiddenElement">
    <label for="mytextarea">
        <textarea id="myTextArea" name="myTextArea" cols="40" rows="20">Hello World</textarea>
    </label>
    <label for="chkDVD">
        <input id="chkDVD" type="checkbox" name="chkDVD" value="DVD" checked="checked">
    </label>
    <label for="radCPUSpeed">
        <input id="radCPUSpeed" type="radio" name="radCPUSpeed" value="1 GHz" checked="checked">
    </label>
    <label for="800 GHz">
        <input id="800 GHz" type="radio" name="radCPUSpeed Group" value="800 GHz" checked="checked">
    </label>
    <label for="1 GHz"><input id="1 GHz" type="radio" name="radCPUSpeed Group" value="1 GHz"></label>
    <label for="1.5 Ghz"><input id="1.5 Ghz" type="radio" name="radCPUSpeed Group" value="1.5 GHz"></label>

    <label for="the-day">
        <select id="the-day" name="theDay" size="5">
            <option value="0" selected="selected">Monday</option>
            <option value="1">Tuesday</option>
            <option value="2">Wednesday</option>
            <option value="3">Thursday</option>
            <option value="4">Firday</option>
            <option value="5">Saturday</option>
            <option value="6">Sunday</option>
        </select>
    </label>
</form>
<script>
    var theDayElement = document.myForm.theDay;
    document.write('There are ' + theDayElement.length + ' options<br>');
    for (var i = 0; i < theDayElement.length; i++) {
        document.write('Option text is ' + theDayElement.options[i].text);
        document.write(' and its value is ');
        document.write(theDayElement.options[i].value);
        document.write('<br>');
    }
</script>
<script>
    var myNewOption = new Option('TheText', 'TheValue');
    theDayElement.options[0] = myNewOption;
    theDayElement.options[0] = null;
</script>
<script>
    function btnAddWedClick() {
        var days = theForm.theDay;
        var options = days.options;
        if (options[2].text != 'Wednesday') {
            var option = new Option('Wednesday', 2);
            var thursdayOption = options[2];
            try {
                days.add(option, thursdayOption);
            }
            catch (error) {
                days.add(option, 2);
            }
        } else {
            alert('Do you want to have TWO Wednesdays?');
        }
    }

    function btnRemoveWedClick() {
        var days = theForm.theDay;
        if (days.options[2].text == 'Wednesday') {
            days.remove(2);
        } else {
            alert('There is Wednesday here!');
        }
    }
</script>
<output for="field1 field2" id="result" name="result">10</output>
<meter min="0" max="150" low="40" optimum="75" high="100" value="80">80 Units of Something</meter>
<progress max="100" value="40">40% done with what you're doing</progress>
</body>
</html>